<script setup lang="ts">
/**
 *
 * 功能：
 *  - 提供`查询表单` `NDataTable` `NPagination`插槽
 *  - 使`NDataTable`高度填充剩余空间（使用作用域插槽数据并绑定到`NDataTable`）
 *
 */
const tableSlotBindProps = {
  flexHeight: true,
  style: 'flex: 1'
}
</script>

<template>
  <div class="table-view">
    <slot name="form"></slot>
    <slot
      name="table"
      v-bind="tableSlotBindProps"
    ></slot>
    <slot name="pagination"></slot>
  </div>
</template>

<style scoped>
.table-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px 0;
}

/* :deep(.n-form.n-form--inline .n-form-item) {
  margin-right: 37px;
} */
</style>
